<template>
    <el-dialog
        v-model="visible"
        title="设置"
        width="800"
        :before-close="handleClose"
    >
        <div class="setting-container">
            <div class="setting-left">
                <el-anchor
                    :container="containerRef"
                    direction="vertical"
                    type="default"
                    :offset="30"
                    @click="handleClick"
                >
                    <el-anchor-link href="#systemSet" title="系统设置"/>
                    <el-anchor-link href="#copyPlatform" title="拷贝平台"/>
                    <el-anchor-link href="#shortcutKeys" title="快捷键"/>
                    <el-anchor-link href="#markdownTheme" title="文档主题"/>
                    <el-anchor-link href="#codeTheme" title="代码主题"/>
                    <el-anchor-link href="#imageAltText" title="图片备注文字"/>
                    <el-anchor-link href="#downFooterText" title="文章尾片段"/>
                </el-anchor>
            </div>
            <div class="setting-right">
                <div ref="containerRef" style="height: 300px; overflow-y: auto">
                    <div id="systemSet">
                        <el-divider content-position="left">系统设置</el-divider>
                        <setting-item label="暗黑主题">
                            <el-switch :model-value="systemStore.isDark" @change="systemStore.setIsDark"></el-switch>
                        </setting-item>
                        <setting-item label="查看方式">
                            <el-select :model-value="systemStore.viewDevice" placeholder="请选择默认查看方式"
                                       @change="systemStore.setViewDevice">
                                <el-option label="手机端" value="phone"></el-option>
                                <el-option label="web端" value="web"></el-option>
                                <el-option label="暂时隐藏" value="none"></el-option>
                            </el-select>
                        </setting-item>
                        <setting-item label="文件名前缀规则">
                            <el-input :model-value="systemStore.newFileNamePrefixText"
                                      :disabled="systemStore.newFileNamePrefix!=='custom'"
                                      placeholder="请输入文件名前缀" @input="systemStore.setNewFileNamePrefixText">
                                <template #prepend>
                                    <el-select :model-value="systemStore.newFileNamePrefix" placeholder="规则" style="width: 150px"
                                               @change="systemStore.setNewFileNamePrefix">
                                        <el-option label="年月日" value="date"/>
                                        <el-option label="年月日_时分" value="time"/>
                                        <el-option label="自定义" value="custom"/>
                                        <el-option label="无" value="no"/>
                                    </el-select>
                                </template>
                                <template #append>
                                    文件名.md
                                </template>
                            </el-input>
                        </setting-item>
                        <setting-item label="关闭按钮">
                            <el-radio-group :model-value="systemStore.closeMethod" @change="systemStore.setCloseMethod">
                                <el-radio value="close">关闭窗口</el-radio>
                                <el-radio value="hide">收到托盘</el-radio>
                            </el-radio-group>
                        </setting-item>
                    </div>
                    <div id="copyPlatform">
                        <el-divider content-position="left">拷贝平台</el-divider>
                        <setting-item label="打开平台">
                            <el-switch :model-value="systemStore.openPlat" active-text="拷贝后打开平台"
                                       inactive-text="不打开平台" @change="systemStore.setOpenPlat"></el-switch>
                        </setting-item>
                        <el-button type="primary" link :icon="Plus" style="float: right">新增平台</el-button>
                        <setting-item label="拷贝平台">
                            <el-checkbox-group :model-value="systemStore.copyPlat" @change="systemStore.setCopyPlat">
                                <el-checkbox value="wechat"><i class="iconfont icon-wechat"></i> 公众号</el-checkbox>
                                <el-checkbox value="juejin"><i class="iconfont icon-juejin"></i> 掘金</el-checkbox>
                                <el-checkbox value="zhihu"><i class="iconfont icon-zhihu"></i> 知乎</el-checkbox>
                                <el-checkbox value="csdn"><i class="iconfont icon-csdn"></i> CSDN</el-checkbox>
                            </el-checkbox-group>
                        </setting-item>
                        <setting-item label="拷贝到掘金">
                            <el-switch active-text="直接拷贝" inactive-text="点击选择"
                                       :model-value="systemStore.copyJuejinWay"
                                       @change="systemStore.setCopyJuejinWay"></el-switch>
                            <el-tooltip
                                class="box-item"
                                effect="dark"
                                placement="top"
                            >
                                <template #content>
                                    '直接拷贝': 点击掘金平台时，直接将内容以默认主题复制到掘金平台<br/>
                                    '点击选择': 点击掘金平台时，先选择主题，再拷贝
                                </template>
                                <el-icon class="warning-icon">
                                    <WarningFilled/>
                                </el-icon>
                            </el-tooltip>
                        </setting-item>
                    </div>
                    <div id="shortcutKeys">
                        <el-divider content-position="left">快捷键</el-divider>
                        <setting-item label="新增">
                            <el-input/>
                        </setting-item>
                        <setting-item label="撤销">
                            <el-input/>
                        </setting-item>
                        <setting-item label="复制">
                            <el-input/>
                        </setting-item>
                        <setting-item label="粘贴">
                            <el-input/>
                        </setting-item>
                    </div>
                    <div id="markdownTheme">
                        <el-divider content-position="left">文档主题</el-divider>
                        <setting-item label="默认主题">
                            <el-select :model-value="systemStore.defaultMarkdownTheme" placeholder="请选择默认主题"
                                       @change="systemStore.setMarkdownTheme">
                                <el-option v-for="item in markdownThemeConfig" :key="item.id" :label="item.name"
                                           :value="item.key"></el-option>
                            </el-select>
                        </setting-item>
                        <setting-item label="掘金默认主题">
                            <el-select :model-value="systemStore.defautJuejinTheme" placeholder="请选择默认主题"
                                       @change="systemStore.setJuejinTheme">
                                <el-option v-for="(item, index) in juejinMarkdownThemeConfig" :key="index" :label="item"
                                           :value="item"></el-option>
                            </el-select>
                        </setting-item>
                    </div>
                    <div id="codeTheme">
                        <el-divider content-position="left">代码主题</el-divider>
                        <setting-item label="默认主题">
                            <el-select :model-value="systemStore.defaultCodeTheme" placeholder="请选择默认主题"
                                       @change="systemStore.setCodeTheme">
                                <el-option v-for="item in codeThemeConfig" :key="item.id" :label="item.name"
                                           :value="item.key"></el-option>
                            </el-select>
                        </setting-item>
                    </div>
                    <div id="imageAltText">
                        <el-divider content-position="left">图片备注文字</el-divider>
                        <setting-item label="内容">
                            <el-input type="textarea" :model-value="systemStore.insertImageAltText"
                                      placeholder="请输入图片备注文字"
                                      @input="systemStore.setInsertImageAltText"></el-input>
                        </setting-item>
                    </div>
                    <div id="downFooterText">
                        <el-divider content-position="left">文章尾片段内容</el-divider>
                        <setting-item label="内容">
                            <el-input type="textarea" :model-value="systemStore.insertDownFooterText"
                                      placeholder="请输入要插入的文章尾片段内容(markdown格式)"
                                      @input="systemStore.setInsertDownFooterText"></el-input>
                        </setting-item>
                    </div>
                </div>
            </div>
        </div>
    </el-dialog>
</template>

<script setup>
import {ref, defineProps, defineEmits, computed} from "vue";
import {Plus, WarningFilled} from "@element-plus/icons-vue";
import SettingItem from "../../components/SettingItem.vue";
import {useSystemStore} from "../../store/index.js";
import markdownThemeConfig from "../../config/markdownThemeConfig.js";
import codeThemeConfig from "../../config/codeThemeConfig.js";
import juejinMarkdownThemeConfig from "../../config/juejinMarkdownThemeConfig.js";

const props = defineProps({
    open: Boolean
});

const emit = defineEmits(["update:open"]);

const systemStore = useSystemStore();

const containerRef = ref(null);

const visible = computed({
    get() {
        return props.open;
    },
    set(val) {
        emit("update:open", val);
    }
});

function handleClose() {
    visible.value = false;
}


function handleClick(e) {
    e.preventDefault();
}
</script>

<style scoped lang="less">
.setting-container {
    display: flex;

    .setting-left {
        width: 160px;
        border-right: 1px solid #ddd;
    }

    .setting-right {
        flex: 1;
        padding-left: 20px;
        box-sizing: border-box;
    }
}
</style>